<template>
  <div>
    <div class="header">
      <div class="game">
        <img
          src="https://bc.imgix.net/game/image/4eb82f18-7ef4-4700-a7e2-20616c5e94dc.png"
          alt=""
        />
        <div class="right">
          <p style="margin-bottom: 1rem">星光圣诞</p>
          <p style="color: #99a4b0">通过 <span style="color: #fff">务实游戏</span></p>
          <p style="color: #99a4b0">20222/12/17</p>
        </div>
      </div>
      <button class="btn">报名</button>
      <div class="footer">
        <p style="border-right: 1px solid #2d3035">公平</p>
        <p>实时统计</p>
      </div>
    </div>
    <div class="tabs">
      <p class="tab">星光圣诞</p>
      <p class="tab">描述</p>
      <p class="tab">评论</p>
    </div>
    <p class="title">最新投注及比赛</p>
    <div class="tabs">
      <p class="tab">所有投注</p>
      <p class="tab">我的赌注</p>
      <p class="tab">豪客赛</p>
      <p class="tab">比赛</p>
    </div>
    <table>
      <t-head>
        <tr>
          <td>投注编号</td>
          <td>玩家</td>
          <td>支出</td>
          <td>利润</td>
        </tr>
      </t-head>
      <t-body>
        <tr v-for="item in 10" :key="item">
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
        </tr>
      </t-body>
    </table>
  </div>
</template>
<style lang="scss" scoped>
  table {
    margin: 0 0.75rem;
    width: 95%;
  }
  tr {
    width: 100%;
    display: inline-block;
  }
  td {
    width: 22%;
    text-align: center;
    display: inline-block;
  }
  t-head {
    color: #99a4b0;
    display: block;
    font-size: 0.75rem;
  }
  t-body {
    color: #fff;
    display: block;
    font-size: 0.75rem;
    margin-top: 0.75rem;
  }
  .title {
    font-size: 1.25rem;
    color: #fff;
    margin-top: 1.225rem;
    margin-left: 0.75rem;
  }
  .tabs {
    display: flex;
    margin-top: 3rem;
    .tab {
      font-weight: 800;
      padding: 0 1.25rem;
      background: #17181b;
      color: #99a4b0;
      font-size: 0.75rem;
      line-height: 3rem;
    }
  }
  .header {
    padding: 2rem 2rem 0;
    margin-top: 0.75rem;
    background: #17181b;
    .footer {
      display: flex;
      border-top: 1px solid #2d3035;
      p {
        width: 50%;
        text-align: center;
        color: #99a4b0;
        font-size: 0.756rem;
        height: 100%;
        margin: 0;
        line-height: 2.75rem;
      }
    }
  }
  .btn {
    color: #fff;
    background-color: #1d803ab3;
    background-image: conic-gradient(from 1turn, rgba(88, 175, 16, 1), rgba(29, 128, 58, 1));
    height: 3rem;
    margin: 2.125rem 0 0.75rem;
    width: 100%;
    border-radius: 0.25rem;
  }
  .game {
    display: flex;
    width: 100%;

    img {
      display: block;
      width: 10.25rem;
      height: 10.25rem;
      border-radius: 4px;
    }
    .right {
      margin-left: 0.5rem;
      p {
        color: #f5f6f7;
        margin: 0;
        font-size: 0.75rem;
      }
    }
  }
</style>
